<template>
  <div class="MV">
    <van-tabs v-model="tabactive" scrollspy sticky background="transparent" color="#fff" title-inactive-color="#aeaeae" title-active-color="#fff">
      <van-tab v-for="(item, index) in blocks" :title="item.text" :name="item.name" :key="item.name">
        <div class="tab-content" :class="{ last: blocks.length - 1 === index }">
          {{ item.text }}
        </div>
      </van-tab>
    </van-tabs>

    <!-- 底部导航 -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from '../comm/Tabbar.vue'
export default {
  name: 'App',
  data() {
    return {
      tabactive: '1',
      blocks: [],
    }
  },
  created() {
    console.log('22111')
    this.initData()
  },
  methods: {
    initData() {
      for (let i = 1; i < 4; i++) {
        this.blocks.push({ name: `block ${i}`, text: `内容-${i}` })
      }
    },
  },
  components: {
    TabBar,
  },
}
</script>

<style scoped>
.tab-content {
  height: 100px;
}
.tab-content.last {
  height: calc(100vh - 44px);
}
</style>
